<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
		<link rel="stylesheet" type="text/css" href="css/xqy.css"/>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
	</head>
	<body>
		<img class="imgtop" src="img/min.png" >
		<div id="neiron" class="shell">
			<div class="images">
				<div class="img"></div>
				<div class="img"></div>
				<div class="img"></div>
				<div class="img"></div>
			</div>
		</div>
		<div class="nr">
			<img id="sy" src="xqimg/l1.png" >
			<div id="x1">
				
			</div>
			<div id="x2">
				<span>商品</span>
				<span>评价</span>
				<span>详情</span>
				<span>推荐</span>
			</div>
			<img id="sy2" src="xqimg/l2.png" >
		</div>
		<div class="tx">
			<div class="wzk">
				<a>￥5999</a>
			</div>
			<div id="gx1" class="wz2">
				<div class="wz2_nr1">
					预计得600米金
				</div>
				<span>更多</span>
				<div class="wz2_nr2">
					
				</div>
			</div>
			<div class="wzk2">
				Xiaomi 11 UItra
			</div>
			<div class="wzk">
				「米金兑换300元优惠券；至高享24期免息；碎屏保、延保享8折优惠；+1元得200G云空间月卡」
			</div>
			<div class="wzktx">
				 <span>①【专业影像】超级夜景相机+120x潜望式变焦</span><br>
				 <span>②【性能突破】全新骁龙888+LPDDR5+UFS 3.1</span><br>
				 <span>③【灵动小窗】背屏小窗，重要事件不延后</span>
			</div>
			<div class="wzk3">
				<div class="wzk3_wk">
					米金兑换300元优惠券
					<div class="wzk3_fh">
						
					</div>
				</div>
			</div>
		</div>
		<div id="gx2" class="zb">
			<div class="zb_div">
				<div id="kk">
					<img src="xqimg/cpu.png" >
				</div>
				<div id="kk">
					CPU
				</div>
				<div id="kk">
					高通晓龙888
				</div>
			</div>
			<div class="zb_div">
				<div id="kk">
					<img src="xqimg/sxt.png" >
				</div>
				<div id="kk">
					CPU
				</div>
				<div id="kk">
					高通晓龙888
				</div>
			</div>
			<div class="zb_div">
				<div id="kk">
					<img src="xqimg/cpu.png" >
				</div>
				<div id="kk">
					CPU
				</div>
				<div id="kk">
					高通晓龙888
				</div>
			</div>
			<div class="zb_div">
				<div id="kk">
					<img src="xqimg/cpu.png" >
				</div>
				<div id="kk">
					CPU
				</div>
				<div id="kk">
					高通晓龙888
				</div>
			</div>
			<div class="zb_div">
				<div id="kk">
					<img src="xqimg/cpu.png" >
				</div>
				<div id="kk">
					CPU
				</div>
				<div id="kk">
					高通晓龙888
				</div>
			</div>
			<div class="zb_div">
				<div id="kk">
					<img src="xqimg/cpu.png" >
				</div>
				<div id="kk">
					CPU
				</div>
				<div id="kk">
					高通晓龙888
				</div>
			</div>
			<div class="zb_div">
				<div id="kk">
					<img src="xqimg/cpu.png" >
				</div>
				<div id="kk">
					CPU
				</div>
				<div id="kk">
					高通晓龙888
				</div>
			</div>
			<div class="zb_div">
				<div id="kk">
					<img src="xqimg/cpu.png" >
				</div>
				<div id="kk">
					CPU
				</div>
				<div id="kk">
					高通晓龙888
				</div>
			</div>
			<div class="zb_div">
				<div id="kk">
					<img src="xqimg/cpu.png" >
				</div>
				<div id="kk">
					CPU
				</div>
				<div id="kk">
					高通晓龙888
				</div>
			</div>
			<div class="zb_div">
				<div id="kk">
					<img src="xqimg/cpu.png" >
				</div>
				<div id="kk">
					CPU
				</div>
				<div id="kk">
					高通晓龙888
				</div>
			</div>
		</div>
		<div class="zb2">
			<div class="zb2_div">
				<img class="zb2_div_img" src="xqimg/phb.png" >
				<div class="zb2_wz">
					入选【手机直降热销榜】
				</div>
				<div class="zb2_fh">
					
				</div>
			</div>
		</div>
		<div class="zb3">
			<div class="zb2_div">
				<div style="width: 0.8rem;">
					已选
				</div>
				<div class="zb2_wz">
					Xiaomi 11 Ultra 12GB+256GB 陶瓷白
				</div>
				<div class="zb2_fh">
					
				</div>
			</div>
		</div>
		<div id="gx3" class="zb4">
			<div class="zb2_div">
				<div style="width: 0.8rem;">
					送至
				</div>
				<img class="ity" src="xqimg/dw.png" >
				<div class="zb2_wz">
					北京市 东城区 <a id="z">有现货</a><br />
					<span id="x">23点前付款，预计11月4日送达</span>
				</div>
				<div class="zb2_fh">
					
				</div>
			</div>
		</div>
		<div class="zb3">
			<div class="zb2_div">
				<div class="zb4_wz">
					<img class="xj" src="xqimg/gou.png" >
					<span id="x">小米自营</span>
					<img class="xj" src="xqimg/gou.png" >
					<span id="x">小米发货</span>
					<img class="xj" src="xqimg/gou.png" >
					<span id="x">7天无理由退货</span>
				</div>
				<div class="zb2_fh">
					
				</div>
			</div>
		</div>
		<div style="height: 0.3rem;">
			<!-- 魂 -->
		</div>
		<div class="nr1">
			<div class="nr1_ys1">
				推荐套餐
			</div>
			<div class="nr1_ys2">
				<div class="nr1_ys2_ns1">
					<img src="xqimg/sj.png" >
					&nbsp;Xiaomi 11...<br>
					<span>￥5999</span>
				</div>
				<div class="nr1_ys2_ns2">
					<img src="xqimg/jh.png" >
				</div>
				<div class="nr1_ys2_ns1">
					<img src="xqimg/cdb.jpg" >
					&nbsp;小米80w无...<br>
					<span>￥5999</span>
				</div>
			</div>
			<div class="nr1_ys1_2">
				总价￥6098 ￥6498 节省400
			</div>
			<div class="nr1_ys1_3">
				购买此套餐（2件商品）
			</div>
		</div>
		
		<div class="nr2">
			<div class="nr2_ys1">
				<div style="font-size: 0.40rem;">
					用户评价
				</div>
				<div class="zb2_fh">
					
				</div>
			</div>
			<div class="nr2_ys2">
				<div>拍照一流</div>
				<div>价格实惠</div>
				<div>颜值够高</div>
				<div>速度较快</div>
				<div>续航出色</div>
				<div>系统稳定</div>
			</div>
			<div class="nr2_ys3">
				<div class="nr2_ys3_nr">
					<div class="ys_nr1">
						<img class="ys_tx" src="xqimg/tx.JPG" >
						<div class="ys_wz">往事随风而逝<a>2021-11-03</a></div>
					</div>
					<div class="ys_nr2">
						<a>电池续航：不打游戏的话，足够使用一天了</a>
						<a>系统：还可以，但...</a>
					</div>
					<div class="ys_nr3">
						<img src="xqimg/t1.jpg" >
						<img src="xqimg/t2.jpg" >
						<img src="xqimg/t3.jpg" >
					</div>
				</div>
				<div class="nr2_ys3_nr">
					<div class="ys_nr1">
						<img class="ys_tx" src="xqimg/tx.JPG" >
						<div class="ys_wz">往事随风而逝<a>2021-11-03</a></div>
					</div>
					<div class="ys_nr2">
						<a>电池续航：不打游戏的话，足够使用一天了</a>
						<a>系统：还可以，但...</a>
					</div>
					<div class="ys_nr3">
						<img src="xqimg/t1.jpg" >
						<img src="xqimg/t2.jpg" >
						<img src="xqimg/t3.jpg" >
					</div>
				</div>
				<div class="nr2_ys3_nr">
					<div class="ys_nr1">
						<img class="ys_tx" src="xqimg/tx.JPG" >
						<div class="ys_wz">往事随风而逝<a>2021-11-03</a></div>
					</div>
					<div class="ys_nr2">
						<a>电池续航：不打游戏的话，足够使用一天了</a>
						<a>系统：还可以，但...</a>
					</div>
					<div class="ys_nr3">
						<img src="xqimg/t1.jpg" >
						<img src="xqimg/t2.jpg" >
						<img src="xqimg/t3.jpg" >
					</div>
				</div>
			</div>
		</div>
		<div style="height: 0.3rem;">
			<!-- 空位 -->
		</div>
		<div class="nr3">
			<div class="nr3_ys1">
				<div style="font-size: 0.40rem;">
					米粉点评团
				</div>
				<div class="zb2_fh">
					
				</div>
			</div>
			<div class="nr3_ys2">
				<div class="nr3_ys2_nr">
					<img class="sctp" src="xqimg/sc1.jpg" >
					<a>手机摄影「阿那亚•...</a>
					<div class="nr3_ys2_nr2">
						<img src="./xqimg/sc4.jpg" >
						<a>Meto</a>
						<img src="xqimg/yj.png" >
						<span>195</span>
					</div>
				</div>
				<div class="nr3_ys2_nr">
					<img class="sctp" src="xqimg/sc2.jpeg" >
					<a>手机摄影「阿那亚•...</a>
					<div class="nr3_ys2_nr2">
						<img src="./xqimg/sc4.jpg" >
						<a>Meto</a>
						<img src="xqimg/yj.png" >
						<span>195</span>
					</div>
				</div>
				<div class="nr3_ys2_nr">
					<img class="sctp" src="xqimg/sc3.jpg" >
					<a>手机摄影「阿那亚•...</a>
					<div class="nr3_ys2_nr2">
						<img src="./xqimg/sc4.jpg" >
						<a>Meto</a>
						<img src="xqimg/yj.png" >
						<span>195</span>
					</div>
				</div>
				<div class="nr3_ys2_nr">
					<img class="sctp" src="xqimg/sc1.jpg" >
					<a>手机摄影「阿那亚•...</a>
					<div class="nr3_ys2_nr2">
						<img src="./xqimg/sc4.jpg" >
						<a>Meto</a>
						<img src="xqimg/yj.png" >
						<span>195</span>
					</div>
				</div>
			</div>
		</div>
		<div class="nr4">
			<div id="neiron2" class="shell2">
				<div class="images2">
					<div class="img2"></div>
					<div class="img2"></div>
					<div class="img2"></div>
					<div class="img2"></div>
				</div>
			</div>
		</div>
		<div class="nr5">
			<div class="nr5_top">
				<div>
					商品推荐
				</div>
				<div>
					爆款推荐
				</div>
			</div>
			<div class="nr5_nr">
				<div class="nr5_nr_div">
					<img src="xqimg/jms1.png" >
					<div class="nr5_zdiv">
						史上最强小金刚
					</div>
					<a>￥1599起</a><span>1799</span>
				</div>
				<div class="nr5_nr_div">
					<img src="xqimg/jms2.png" >
					<div class="nr5_zdiv">
						史上最强小金刚
					</div>
					<a>￥1599起</a><span>1799</span>
				</div>
				<div class="nr5_nr_div">
					<img src="xqimg/jms3.png" >
					<div class="nr5_zdiv">
						史上最强小金刚
					</div>
					<a>￥1599起</a><span>1799</span>
				</div>
				<div class="nr5_nr_div">
					<img src="xqimg/jms4.png" >
					<div class="nr5_zdiv">
						史上最强小金刚
					</div>
					<a>￥1599起</a><span>1799</span>
				</div>
				<div class="nr5_nr_div">
					<img src="xqimg/jms5.png" >
					<div class="nr5_zdiv">
						史上最强小金刚
					</div>
					<a>￥1599起</a><span>1799</span>
				</div>
				<div class="nr5_nr_div">
					<img src="xqimg/jms6.png" >
					<div class="nr5_zdiv">
						史上最强小金刚
					</div>
					<a>￥1599起</a><span>1799</span>
				</div>
			</div>
		</div>
		<div id="jc2" style="height: 0.3rem;">
			<!-- 魂 -->
		</div>
			
		<div id="jc1" class="yc1_x">
			<div>
				商品介绍
			</div>
			<div>
				规格参数
			</div>
		</div>
		<div class="dbx">
			<div class="dbnr">
				
			</div>
		</div>
		
		<div class="bottom">
			<div class="x1">
				<div class="x1_img">
					
				</div>
				<a>首页</a>
			</div>
			<div class="x1">
				<div class="x2_img">
					
				</div>
				<a>客服</a>
			</div>
			<div id="xgwc" class="x1">
				<div class="x3_img">
					
				</div>
				<a>购物车</a>
			</div>
			<div id="gwc" class="lefbt">
				加入购物车
			</div>
			<div id="gm" class="rigtbt">
				立即购买
			</div>
		</div>
		<div class="appk">
			<div class="app"></div>
		</div>
		<div class="yybf">
			
		</div>
			<div class="spgg">
				<div id="gg1">
					<div class="gg1_ys1">
						<div class="gg1_ys1_zys">
							<img src="xqimg/gg1.png" >
							<div class="zys_wz">
								<div style="width: 100%;">
									<a>¥5999</a>
								</div>
								<div style="width: 100%;">
									<span>Xiaomi 11 Ultra 12GB+256GB 陶瓷白</span>
								</div>
							</div>
						</div>
					</div>
					<div class="gg1_ys2">
						<div class="zyx_nr">
							<div style="width: 100%;">
								版本
							</div>
							<div class="zyx_nr_div">
								12GB+256GB
							</div>
							<div class="zyx_nr_div">
								8GB+256GB
							</div>
							<div class="zyx_nr_div">
								12GB+512GB
							</div>
						</div>
						<div class="zyx_nr">
							<div style="width: 100%;">
								颜色
							</div>
							<div class="zyx_nr_div">
								陶瓷白
							</div>
							<div class="zyx_nr_div">
								陶瓷黑
							</div>
						</div>
						<div class="zyx_nr">
							<div style="width: 100%;">
								套餐
							</div>
							<div class="zyx_nr_div">
								标配
							</div>
							<div class="zyx_nr_div">
								套装版(赠充电器)
							</div>
						</div>
						<div class="gmsl">
							<span>购买数量</span>
							<div class="gmsl_x">
								<img class="jian" src="xqimg/jian.png" >
								<div class="sz">
									1
								</div>
								<img class="jia" src="xqimg/jia.png" >
							</div>
						</div>
						<div style="width: 100%;margin-top: 0.5rem;">
							小米服务
						</div>
						<div class="zyx_nr">
							<div class="zk">
								<div>
									<img src="xqimg/gg3.png.png" >
									尊享服务
								</div>
								<div>
									<img src="xqimg/gg7.png" >
									<span>服务介绍</span>
								</div>
							</div>
							<div class="zyx_nr_div">
								MiCare保障服务949元
							</div>
						</div>
						<div class="zyx_nr">
							<div class="zk">
								<div>
									<img src="xqimg/gg3.png.png" >
									尊享服务
								</div>
								<div>
									<img src="xqimg/gg7.png" >
									<span>服务介绍</span>
								</div>
							</div>
							<div class="zyx_nr_div">
								MiCare保障服务949元
							</div>
							<div class="zyx_nr_div">
								MiCare保障服务949元
							</div>
						</div>
						<div class="zyx_nr">
							<div class="zk">
								<div>
									<img src="xqimg/gg3.png.png" >
									尊享服务
								</div>
								<div>
									<img src="xqimg/gg7.png" >
									<span>服务介绍</span>
								</div>
							</div>
							<div class="zyx_nr_div">
								MiCare保障服务949元
							</div>
						</div>
						<div class="zyx_nr">
							<div class="zk">
								<div>
									<img src="xqimg/gg3.png.png" >
									尊享服务
								</div>
								<div>
									<img src="xqimg/gg7.png" >
									<span>服务介绍</span>
								</div>
							</div>
							<div class="zyx_nr_div">
								MiCare保障服务949元
							</div>
							<div class="zyx_nr_div">
								MiCare保障服务949元
							</div>
							<div class="zyx_nr_div">
								MiCare保障服务949元
							</div>
							<div class="zyx_nr_div">
								MiCare保障服务949元
							</div>
						</div>
					</div>
				
					<div id="fk" class="dbbt">
						确定
					</div>
				</div>
				<!-- --------------------------------------------------------------- -->
				<div id="gg2">
					<div class="gg2_nr">
						优惠
					</div>
					<span>米金</span>
					<div class="gg2_nr2">
						<div class="gg2_nr3">
							米金
						</div>
						<span>预计可得600米金</span>
						<div class="gg2_fh">
							
						</div>
					</div>
					<div style="height: 9.7rem;">
						
					</div>
					<div id="fk2" class="dbbt">
						确定
					</div>
				</div>
				<div id="gg3">
					<div class="gg2_nr">
						关键参数
					</div>
					<div class="gg3_nr">
						<div class="gg3_nr2">
							<span>CPU型号</span>
							<a>高通骁龙888</a>
						</div>
						<div class="gg3_nr2">
							<span>CPU主频</span>
							<a>最高可达2.84GHz</a>
						</div>
						<div class="gg3_nr2">
							<span>后置摄像头</span>
							<a>5000万像素+4800万像素</a>
						</div>
						<div class="gg3_nr2">
							<span>前置摄像头</span>
							<a>2000万像素</a>
						</div>
						<div class="gg3_nr2">
							<span>屏幕尺寸</span>
							<a>6.81英寸</a>
						</div>
						<div class="gg3_nr2">
							<span>屏幕分辨率</span>
							<a>3200x1440像素</a>
						</div>
						<div class="gg3_nr2">
							<span>运行内存</span>
							<a>最高12GB</a>
						</div>
						<div class="gg3_nr2">
							<span>存储容量</span>
							<a>高通骁龙888</a>
						</div>
						<div class="gg3_nr2">
							<span>机身厚度</span>
							<a>高通骁龙888</a>
						</div>
						<div class="gg3_nr2">
							<span>电池容量</span>
							<a>高通骁龙888</a>
						</div>
						<div class="gg3_nr2">
							<span>网络类型</span>
							<a>高通骁龙888</a>
						</div>
						<div class="gg3_nr2">
							<span>网络模式</span>
							<a>高通骁龙888</a>
						</div>
					</div>
					<div class="dbbt">
						确定
					</div>
				</div>
				<div id="gg4">
					<div class="gg2_nr">
						收货地址
					</div>
					<div class="gg4_nr">
						<div class="gg4_nr2">
							<img src="xqimg/dwd.png" >
							<div style="width: 80%;">
								<div style="width: 100%;">
									<span style="font-size: .35rem;">qew河北</span>
								</div>
								<span style="color: #0000004D;font-size: .20rem;">qew河北</span>
							</div>
						</div>
					</div>
					<div class="dbbt">
						选择新地址
					</div>
				</div>
				<img class="tc" src="xqimg/tc.png" >
			</div>
		<script type="text/javascript">
			var navi=document.querySelector(".shell");
			var sideBar=document.querySelector(".nr");
			var x1=document.querySelector("#x1");
			var x2=document.querySelector("#x2");
			var xgwc=document.querySelector("#xgwc");
			
			
			//记录一开始侧边栏顶边和导航栏顶边的距离
			var scrollTop=sideBar.offsetTop-navi.offsetTop;
			//记录侧边栏一开始距离浏览器顶边偏移量
			var oriTop=sideBar.offsetTop;
			document.onscroll=function(){
				//window.pageYOffset窗口y轴偏移量
				//window.pageXOffset窗口x轴偏移量
				// console.log(window.pageYOffset);
				if(window.pageYOffset>=navi.offsetTop){
					sideBar.style.position="fixed";
					sideBar.style.backgroundColor="white";
					document.getElementById("sy").src="xqimg/left.png";
					document.getElementById("sy2").src="xqimg/right.png";
					x1.style.display="none";
					x2.style.display="block";
					sideBar.style.top="0";
					// scrollTop+"px"
				}else if(window.pageYOffset<=navi.offsetTop){
					sideBar.style.position="absolute";
					sideBar.style.backgroundColor="";
					document.getElementById("sy").src="xqimg/l1.png";
					document.getElementById("sy2").src="xqimg/l2.png";
					x1.style.display="block";
					x2.style.display="none";
					sideBar.style.top=oriTop+"px";
				}
			}
			
		
			let images = document.querySelector(".images")
			let wz = 0;
			let dsq;
			function yd() {
			    images.style.left = (wz * -100) + "%";
			}
			function xyz() {
			    if (wz >= 4-1) {
			        wz = 0
			    } else {
			        wz++
			    }
			}
			function syz() {
			    if (wz < 1) {
			        wz = 4-1
			    } else {
			        wz--
			    }
			}
			function dsff(){
			    dsq = setInterval(() => {
			        wz++
			        syz()
			        xyz()
			        yd()
			    }, 4000)
			}
			dsff();
				var sy=document.querySelector("#sy");
				sy.onclick=function(){
					// javascript:history.back();
					window.location.href="index.html";
				}
			
			var gm=document.querySelector("#gm");
			var gwc=document.querySelector("#gwc");
			var spgg=document.querySelector(".spgg");
			var tc=document.querySelector(".tc");
			var yybf=document.querySelector(".yybf");
			var gg1=document.querySelector("#gg1");
			var gx1=document.querySelector("#gx1");
			var gx2=document.querySelector("#gx2");
			var gx3=document.querySelector("#gx3");
			var fs;
			tc.onclick=function(){
				spgg.style.bottom="-15rem";
				yybf.style.display="none";
				fs=1;
			}
			gm.onclick=function(){
				spgg.style.bottom="0";
				yybf.style.display="block";
				fs=1;
				gg1.style.display="block";
				gg2.style.display="none";
				gg3.style.display="none";
				gg4.style.display="none";
			}
			gwc.onclick=function(){
				yybf.style.display="block";
				spgg.style.bottom="0";
				fs=0;
				gg1.style.display="block";
				gg2.style.display="none";
				gg3.style.display="none";
				gg4.style.display="none";
			}
			gx1.onclick=function(){
				spgg.style.bottom="0";
				yybf.style.display="block";
				gg2.style.display="block";
				gg1.style.display="none";
				gg3.style.display="none";
				gg4.style.display="none";
			}
			gx2.onclick=function(){
				spgg.style.bottom="0";
				yybf.style.display="block";
				gg3.style.display="block";
				gg2.style.display="none";
				gg1.style.display="none";
				gg4.style.display="none";
			}
			gx3.onclick=function(){
				spgg.style.bottom="0";
				yybf.style.display="block";
				gg4.style.display="block";
				gg2.style.display="none";
				gg3.style.display="none";
				gg1.style.display="none";
			}
			var fk=document.querySelector("#fk");
			fk.onclick=function(){
				if(fs==1){
					window.location.href="jsy.html";
				}else{
					alert("加入购物车成功");
					spgg.style.bottom="-15rem";
					yybf.style.display="none";
				}
				
			}
			xgwc.onclick=function(){
				if(fs==0){
					window.location = 'gwc.html#ztm=1';
				}else{
					window.location = 'gwc.html#ztm=0';
				}
			}
		</script>
	</body>
</html>
